<template>
	<view class="indexbox">
		<view class="u-page">
			<!-- #ifndef H5 -->
			<u-sticky id="header">
				<view>
					<u-navbar :is-back="false" :background="{background: '#000'}" :border-bottom="false">
						<!-- <view class="slot-wrap">
							<view class="city" @click="showaddpopup=true">{{padd}}
								<u-icon name="arrow-down" size="32"></u-icon>
							</view>
						</view> -->
						<view style="display: flex;align-items: center;width: 90%;margin: auto;">
							<view style="display: flex;align-items: center;justify-content: center;width: 25%;" @click="showaddpopup=true">
								<u-icon name="map-fill" color="#FFFFFF" size="30"></u-icon>
								<view style="margin-left: 10rpx;color: #fff;font-size: 25rpx;"  @click="map()">{{padd}}</view>
							</view>
							<view style="width: 60%;">
								<u-tabs :list="listtab" active-color="#A87B38" inactive-color="#fff" :show-bar="true"
									:style="{background: '#000'}" bar-width="40" font-size="40" :is-scroll="false" :current="currenttab"
									@change="swiperchange1"></u-tabs>
							</view>
						</view>
					</u-navbar>
					<view style="height: 20rpx;background-color: #000;"></view>
					<!-- <u-tabs :list="listtab" active-color="#A87B38" inactive-color="#999" :show-bar="false"
						:style="{background: '#2A2931'}" bar-width="60" :is-scroll="false" :current="currenttab"
						@change="change"></u-tabs> -->
				</view>
			</u-sticky>
			<!-- #endif -->
			<swiper :current="currenttab" @change="swiperchange"
				:style="{height: 'calc(100vh - '+ (fixswiper.footer+fixswiper.header) +'px)'}">
				<swiper-item v-for="(scrollitem,scrollindex) in peoplelist" :key="scrollindex">
					<scroll-view style="height: 100%;" lower-threshold="100" refresher-background="#000"
						@refresherrefresh="refresherrefresh" @scroll='refresher[scrollindex] = false' @scrolltolower="scrolltolower" refresher-enabled
						:refresher-triggered="refresher[scrollindex]" refresher-default-style="white" scroll-y="true">
						<view v-if="scrollindex == 0 && tuijian == 0" style="background: #333; width:100%;height: 310rpx;width: 90%;margin: 30rpx auto;border-radius: 30rpx;">
							<view style="height:70rpx;line-height: 70rpx;color:#fff;margin: 20rpx 20rpx; font-size: 36rpx; font-weight: bolder;">用户推荐</view>
							<scroll-view scroll-x="true" style="width: 100%;white-space: nowrap;">
								<view style="width: 20%; margin:0 20rpx; display: inline-block;" v-for="(item,index) in peoplelist[scrollindex]" :key="index" @click="vipClick(item,index)">
									<image :src="HOSTURL + item.user_head" style="width: 100%;height: 160rpx;border-radius: 20rpx;" mode="aspectFill"></image>
									<view style="color:#fff; text-align: center; overflow: hidden; font-size: 20rpx;">
										{{item.user_name}}
									</view>
								</view>
							</scroll-view>
						</view>
						<view v-if="scrollindex == 0 && tuijian == 0" style="width:90%; margin: 30rpx auto;">
							<view style="height:70rpx;line-height: 70rpx;color:#fff;margin: 20rpx 20rpx; font-size: 36rpx;font-weight: bolder;">颜值墙</view>
						</view>
						<view v-if="scrollindex == 0 && tuijian == 0" class="vieOne">
							<view style="width: 48%;" v-for="(item,index) in peoplelist[scrollindex]" :key="index" @click="vipClick(item,index)">
								<view style="width: 100%;position: relative;">
									<image :src="HOSTURL + item.user_head" style="width: 100%;height: 350rpx;border-radius: 20rpx;" mode="aspectFill"></image>
									<view v-if="false" class="zhanshi">最近活跃</view>
									<view v-if="true" class="zhanshi">
										<view style="width: 10rpx;height: 10rpx;border-radius: 50%;background-color: #00FF00;margin-right: 10rpx;"></view>
										<view>在线</view>
									</view>
								</view>
								<view style="display: flex;margin-top: 20rpx;margin-left: 40rpx;color: #fff;font-size: 30rpx;align-items: center;">
									<view>{{item.user_name}}</view>
									<view v-if="true" class="biaoji" :style="false?'background: linear-gradient(to right, #d9a14e, #b57e2c);':'background: #313131;'">
										<image v-if="false" src="../../static/index/nvshen.png" style="width: 18rpx;height: 18rpx;"></image>
										<image v-if="true" src="../../static/index/zhenren.png" style="width: 19rpx;height: 19rpx;"></image>
										<view style="margin-left: 5rpx;" :style="false?'color: #0F0D0F;':'color: #C99F51;'">{{true?'女神':'真人'}}</view>
									</view>
								</view>
								<view style="color: #C5C3C3;font-size: 22rpx;margin-top: 20rpx;margin-left: 40rpx;">{{item.user_age}}岁·{{item.user_distance}}·{{item.occupation}}</view>
								<view style="height: 20rpx;"></view>
							</view>
						</view>
						<view v-if="scrollindex != 0 || tuijian != 0" style="width: 90%;margin: auto;">
							<view class="item" @click="vipClick(item,index)" style="margin-bottom: 40rpx;" 
								v-for="(item,index) in peoplelist[scrollindex]" :key="index">
								<image :src="HOSTURL + item.user_head" style="width: 35%;height: 100%;border-radius: 20rpx;" mode="aspectFill"></image>
								<view style="height: 100%;width: 50%;margin-left: 5%;">
									<view style="height: 20rpx;"></view>
									<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
										<view style="display: flex;align-items: center;color: #fff;font-size: 30rpx;height: 60rpx;">
											<view>{{item.user_name}}</view>
											<view v-if="true" class="biaoji1" :style="false?'background: linear-gradient(to right, #d9a14e, #b57e2c);':'background: #313131;'">
												<image v-if="false" src="../../static/index/nvshen.png" style="width: 18rpx;height: 18rpx;"></image>
												<image v-if="true" src="../../static/index/zhenren.png" style="width: 19rpx;height: 19rpx;"></image>
												<view style="margin-left: 5rpx;" :style="false?'color: #0F0D0F;':'color: #C99F51;'">{{true?'女神':'真人'}}</view>
											</view>
										</view>
										<view v-if="false" class="zhanshi1">最近活跃</view>
										<view v-if="true" class="zhanshi1">
											<view style="width: 10rpx;height: 10rpx;border-radius: 50%;background-color: #00FF00;margin-right: 10rpx;"></view>
											<view>在线</view>
										</view>
									</view>
									<view style="height: 20rpx;"></view>
									<view style="width: 100%;display: flex;align-items: center;font-size: 20rpx;">
										<view class="biaoqian">{{item.user_age}}岁</view>
										<view class="biaoqian">{{item.city}}</view>
										<view class="biaoqian">{{item.occupation}}</view>
									</view>
									<view style="height: 20rpx;"></view>
									<view style="width: 100%;display: flex;align-items: center;font-size: 20rpx;">
										<view class="biaoqian">
											<u-icon name="map-fill" color="#C5C3C3" size="20"></u-icon>
											<view style="margin-left: 5rpx;">{{item.user_distance}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore margin-top="50" margin-bottom="50" :status="loadmore[scrollindex]" />
					</scroll-view>
				</swiper-item>
			</swiper>
		</view> 
		<!-- <u-popup v-model="show" mode="center" width="85%" :closeable="true"
			close-icon-color="#B2B2B2" close-icon-size='40'>
			<view style="background: #2C2C2C;color: #fff;height: 100%;width: 100%;">
				<view style="height: 130rpx;"></view>
				<view style="font-size: 45rpx;text-align: center;">您今日还能查看2位女生</view>
				<view style="text-align: center;margin-top: 30rpx;font-size: 30rpx;">
					<view>非会员每天只能查看10位女生</view>
					<view>（会员可以无限次查看哦）</view>
				</view> 
				<view style="height: 40rpx;"></view>
				<view class="bottomOne" @click="tiaozhuan('/pages/member/index')">开通会员</view>
				<view class="bottomTwo" @click="show = false">继续查看</view>
				<view style="height: 50rpx;"></view>
			</view>
		</u-popup> -->
		<!-- <image @click="yaoqing" src="../../static/yq.png" style="height:80rpx;width:200rpx;position: absolute;right: 50rpx;bottom: 200rpx;"></image> -->
		
		<u-select :list="address" mode="mutil-column-auto" @confirm="confirmadd" v-model="showaddpopup"></u-select>

		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<!-- <u-tabbar id="footer" :border-top="false" bg-color="#1B1A1F" active-color="#A87B38" inactive-color="#CCC" v-model="current" :list="list" :mid-button="false"></u-tabbar> -->
	</view>
</template> 

<script>
	// isIOS = (uni.getSystemInfoSync().platform === 'ios');
	// if (uni.getSystemInfoSync().platform === 'android') {
	// 	let color, ac, c2int, win;
	// 	color = plus.android.newObject("android.graphics.Color")
	// 	ac = plus.android.runtimeMainActivity();
	// 	c2int = plus.android.invoke(color, "parseColor", "#1B1A1F")
	// 	win = plus.android.invoke(ac, "getWindow");
	// 	plus.android.invoke(win, "setNavigationBarColor", c2int)
	// }
	// #ifdef APP-PLUS
		let color, ac, c2int, win;
		color = plus.android.newObject("android.graphics.Color")
		if (uni.getSystemInfoSync().platform === 'android') {
			ac = plus.android.runtimeMainActivity();
			c2int = plus.android.invoke(color, "parseColor", "#1B1A1F")
			win = plus.android.invoke(ac, "getWindow");
			plus.android.invoke(win, "setNavigationBarColor", c2int)
		}
	// #endif
	
	import {
		citydata
	} from '../../static/js/city.js'
	import userItem from '@/components/user-item.vue'
	import store from '@/store/index.js';
	var QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		components: {
			userItem
		},
		data() {
			return {
				show: false,
				ws:null,
				refresher: [false, false, false,],
				HOSTURL: this.$HOSTURL,
				showaddpopup: false,
				isvip:0,
				sex: "男",
				padd: '附近',
				address: [{
					"value": "附近",
					"label": "附近",
					"children": [{
						"value": "附近",
						"label": "附近"
					}]
				}].concat(citydata()),
				currenttab: 0,
				peoplelist: [
					[],
					[],
					[]
				],
				param: {
					pagesize: 10,
					user_id: 0,
					longitude: 0,
					latitude: 0,
					pagecount: 10,
					page: 0,
					online: 1
				},
				page: [0, 0, 0],
				loadmore: ['loadmore', 'loadmore', 'loadmore'],
				fixswiper: {
					header: 10,
					footer: 50
				},
				platform:'',
				tuijian:uni.getStorageSync('tuijian')?uni.getStorageSync('tuijian'):0
			}
		},
	 onLoad(e) {
		 var that = this;
			if(e.share_id){
				uni.setStorageSync("share_id",e.share_id)
				console.log("分享的参数")
				console.log(e)
			}
			
			const query = uni.createSelectorQuery().in(that);
			query.select('#footer').boundingClientRect(data => {
				that.fixswiper.footer = data.height
			}).exec();
			query.select('#header').boundingClientRect(data => {
				that.fixswiper.header = data.height
			}).exec();
			that.param.user_id = uni.getStorageSync('uid')?uni.getStorageSync('uid'):10017
			that.param.longitude = uni.getStorageSync('longitude')?uni.getStorageSync('longitude'):12.64247
			that.param.latitude = uni.getStorageSync('latitude')?uni.getStorageSync('latitude'):31.36897
			that.param.sex = uni.getStorageSync('sex')?uni.getStorageSync('sex'):"男"
			that.param.dyCity = uni.getStorageSync('dyCity')?uni.getStorageSync('dyCity'):""
			that.padd = uni.getStorageSync('dyCity')?uni.getStorageSync('dyCity'):"附近"
			console.log("index请求参数11111")
			console.log(that.param)
			
			uni.getSystemInfo({
				success:(res) => {
					console.log(123123123);
					console.log(res)
					that.platform = res.platform  // 14.3
					if(res.platform != 'devtools'){
						that.yaoqing()
					}
				}
			})
			// this.getlist()
		},
		onShow() {
			this.$nextTick(() => {
				this.param.user_id = uni.getStorageSync('uid')?uni.getStorageSync('uid'):10017
				this.param.longitude = uni.getStorageSync('longitude')?uni.getStorageSync('longitude'):12.64247
				this.param.latitude = uni.getStorageSync('latitude')?uni.getStorageSync('latitude'):31.36897
				this.param.sex = uni.getStorageSync('sex')?uni.getStorageSync('sex'):"男"
				this.param.dyCity = uni.getStorageSync('dyCity')?uni.getStorageSync('dyCity'):""
				this.padd = uni.getStorageSync('dyCity')?uni.getStorageSync('dyCity'):"附近"
				console.log("请求参数22222")
				console.log(this.param)
				this.peoplelist=[[],[],[]];
				this.getlist()
			})
		},
		methods: {
			map(){
				var _this = this
				console.log(_this.$store.state.hasLogin);
				console.log(_this.platform);
						
					if(!uni.getStorageSync('dyCity')){
						
						/*#ifndef APP*/	
						qqmapsdk = new QQMapWX({
							key: '6NHBZ-CIZWP-LBHDR-V7NEE-WFODK-EXBPK'
						});
							// this.getuserinfo()
						_this.$store.dispatch('getUserPosition').then(res=>{
							console.log('地图');
							console.log(res)
							qqmapsdk.reverseGeocoder({
								location: res.latitude + ',' +res.longitude,
								success(result) {
									uni.setStorageSync('dyCity', result.result.ad_info.city)
									console.log("城市")
									console.log(result.result.ad_info.city)
								}, 
								fail(err) {
								   uni.showToast('获取城市失败')
								},
								complete() {
								}
							})
						})
						/*#endif*/
						
						
						/*#ifdef APP*/		
						uni.showModal({
							title: '提示',
							content: '为了推荐距离您更近以及您所在地区的用户。我们需要获得您设备所在的位置信息（仅获取您所在市区及以上的地区信息）。',
							success: function (res) {
								console.log('login=======map');
								qqmapsdk = new QQMapWX({
									key: '6NHBZ-CIZWP-LBHDR-V7NEE-WFODK-EXBPK'
								});
									// this.getuserinfo()
								_this.$store.dispatch('getUserPosition').then(res=>{
									console.log('地图');
									console.log(res)
									 qqmapsdk.reverseGeocoder({
										location: res.latitude + ',' +res.longitude,
										success(result) {
											uni.setStorageSync('dyCity', result.result.ad_info.city)
											_this.padd = result.result.ad_info.city;
											console.log("城市")
											console.log(result.result.ad_info.city)
										}, 
										fail(err) {
										   uni.showToast('获取城市失败')
										},
										complete() {
										}
									 })
								})
							}
						});
						/*#endif*/
					}
					
			},
			vipClick(item,index){
				if(false){
					this.show = true
					return
				}else{
					console.log(item)
					console.log(index)
					console.log(this.peoplelist[this.currenttab])
					this.tiaozhuan('/pages/userinfo/index?id='+item.user_id)
				}
			},
			tiaozhuan(url){
				this.show = false
				uni.navigateTo({
					url: url
				})
			},
			yaoqing(){
				if (!this.$store.state.hasLogin) {
					uni.redirectTo({
						url: '/pages/appview/index'
					})
				}else{
					console.log(12312312);
					console.log(uni.getStorageSync('pay_authentication'));
					console.log(uni.getStorageSync('brand'));
					if(uni.getStorageSync('pay_authentication') == 0 && uni.getStorageSync('brand') != 'vivo' && uni.getStorageSync('brand') != 'oppo'){
						uni.redirectTo({
							url: '/pages/appview/authentication'
						})
					}
					// uni.redirectTo({
					// 	url: '/pages/yaoqing/index'
					// })
				}
			},
			swiperchange1(index){
				console.log(index)
				this.currenttab = index;
			},
			async swiperchange(e) {
				console.log(e.detail)
				console.log("切换")
				console.log(this.isvip)
				console.log(e.detail.current)
				this.change(e.detail.current)
				const {
					data: res
				} = await this.$Request({
					url: 'api/user/huiyuan',
					data: this.param
				})
				console.log(res)
				if(res.result.is_vip==1){
					this.isvip = res.result.is_vip
					this.$store.state.isVip = res.result.is_vip
				}
				
			},
			/*async getlist(cb) {
				this.$set(this.loadmore, this.currenttab, 'loading')
				const {
					data: res
				} = await this.$Request({
					url: 'api/user/index',
					data: this.param
				})
				this.$set(this.peoplelist, this.currenttab, this.peoplelist[this.currenttab].concat(res.result))
				this.$set(this.loadmore, this.currenttab, res.result.length ? 'loadmore' : 'nomore')
				typeof cb == 'function' && cb()
			},
			*/
			async getlist(cb) {
				this.param.user_id = uni.getStorageSync('uid')?uni.getStorageSync('uid'):10017
				this.param.longitude = uni.getStorageSync('longitude')?uni.getStorageSync('longitude'):12.64247
				this.param.latitude = uni.getStorageSync('latitude')?uni.getStorageSync('latitude'):31.36897
				this.param.sex = uni.getStorageSync('sex')?uni.getStorageSync('sex'):"男"
				this.param.dyCity = uni.getStorageSync('dyCity')?uni.getStorageSync('dyCity'):""
				console.log("请求参数11111")
				console.log(this.param)
				this.$set(this.loadmore, this.currenttab, 'loading')
				console.log(111111111111)
				const {
					data: res
				} = await this.$Request({
					url: 'api/user/index',
					data: this.param
				})
				uni.showToast({
				   title:res,
				   icon:'none'
				})
				if(res.result){
					this.$set(this.peoplelist, this.currenttab, this.peoplelist[this.currenttab].concat(res.result))
					typeof cb == 'function' && cb()
				}
				this.$set(this.loadmore, this.currenttab, res.result ? 'loadmore' : 'nomore')
			},
			
			onShareAppMessage() {
				const url = '/pages/index/index?share_id='+this.$store.state.userid
			    return {
			        title: this.$store.state.userinfo.name + "邀您来这里一起真实相约吧！",
			        path: url,
			        params: {},
					success(res){
					    uni.showToast({
					         title:'分享成功',
					        })
							console.log(url)
					    },
						
					fail(res){
					     uni.showToast({
					        title:'分享失败',
					        icon:'none'
							})
					}
					
			    };
			},
			onShareTimeline(){
				const url = '/pages/index/index?share_id='+this.$store.state.userid
				return {
				    title: "来这里一起真实相约吧！",
				    path: url,
				    params: {},
					success(res){
					    uni.showToast({
					         title:'分享成功',
					        })
							console.log(url)
					    },
						
					fail(res){
					     uni.showToast({
					        title:'分享失败',
					        icon:'none'
							})
					}
					
				};
			},
			
			removeparam() {
				this.param.online && delete this.param.online
				this.param.nvshen && delete this.param.nvshen
				this.param.vip && delete this.param.vip
			},
			change(index) {
				this.currenttab = index;
				this.removeparam()
				console.log("change")
				console.log(this.param.sex)
				
				this.param.page = this.page[index]
				switch (this.param.sex) {
					case '男':
						switch (index) {
							case 0:
								this.param.online = 1
								break;
							case 2:
								this.param.nvshen = 1
								break;
						}
						break;
					case '女':
						switch (index) {
							case 0:
								this.param.online = 1
								break;
							case 2:
								this.param.vip = 1
								break;
						}
						break;
				}
				if (this.peoplelist[this.currenttab].length == 0) {
					this.param.page = 0
					this.page[this.currenttab] = 0
					this.getlist()
				}
			},
			confirmadd(e) {
				this.padd = e[1]['value']
				if (this.padd == '附近') {
					this.param.city && delete this.param.city
					this.param.page = 0
				} else {
					this.param.city = this.padd
					this.param.page = 0
				}
				this.peoplelist = [
					[],
					[],
					[]
				]
				this.getlist()
			},
			refresherrefresh() {
				var that = this
				that.refresher[that.currenttab] = true
				that.$set(that.peoplelist, that.currenttab, [])
				that.param.page = 0
				that.page[that.currenttab] = 0
				that.getlist(() => {
					that.refresher[that.currenttab] = false
				})
			},
			scrolltolower() {
				this.param.page = ++this.page[this.currenttab]
				this.getlist()
			}
		},
		computed: {
			myinfo() {
				return this.$store.state.userinfo
			},

			list() {
				return this.$store.state.tabbarlist
			},
			current() {
				return this.$store.state.tabbarcurrent
			},
			listtab() {
				var tuijian = uni.getStorageSync('tuijian')?uni.getStorageSync('tuijian'):0;
				console.log('推荐：' + tuijian);
				if(tuijian==1){
					return [{
						name: '附近'
					}, {
						name: '在线'
					}]
				}else{
					return [{
						name: '推荐'
					}, {
						name: '附近'
					}, {
						name: '在线'
					}]
				}
				//this.myinfo.sex == '女' ? [{
				// 	name: '在线优先'
				// }, {
				// 	name: '全部男生'
				// }, {
				// 	name: 'VIP男生'
				// }]:[{
				// 	name: '在线优先'
				// }, {
				// 	name: '距离优先'
				// }, {
				// 	name: '新人注册'
				// }]
			}
		},
		watch: {
			'myinfo.sex': {
				handler: function() {
					
					this.peoplelist = [
						[],
						[],
						[]
					]
					
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	/deep/.u-tabs {
		background-color: #000 !important;
	}

	.indexbox {
		background-color: #000;
		min-height: 100vh;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		flex: 1;
		padding: 0 30rpx;

		.city {
			color: #A87B38;
		}
	}

	.list {
		padding: 10rpx 0;
	}
	.zhanshi{
		background-color: rgba(0, 0, 0, 0.3);
		width: 85rpx;
		height: 35rpx;
		font-size: 17rpx;
		display: flex;
		color: #fff;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		border-radius: 40rpx;
		align-items: center;
		justify-content: center;
	}
	.biaoji{
		font-size: 16rpx;
		display: flex;
		width: 85rpx;
		height: 35rpx;
		border-radius: 5rpx;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}
	.bottomOne{
		margin: 40rpx auto;
		width: 443rpx;
		height: 84rpx;
		background-color: #D6A666;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 35rpx;
	}
	.bottomTwo{
		margin: 40rpx auto;
		width: 443rpx;
		height: 84rpx;
		border: 1rpx solid #D6A666;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #D6A666;
		font-size: 35rpx;
	}
	.item {
		width: 100%;
		height: 300rpx;
		display: flex;
	}
	.zhanshi1{
		height: 60rpx;
		font-size: 16rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.biaoji1{
		font-size: 16rpx;
		width: 85rpx;
		height: 35rpx;
		border-radius: 5rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.biaoqian{
		width: 90rpx;
		height: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #313131;
		border-radius: 5rpx;
		margin-right: 10rpx;
		color: #C5C3C3;
	}
	.vieOne{
		display: flex;
		justify-content: space-between;
		align-items: center;flex-wrap: wrap;
		width: 90%;
		margin: auto;
	}
</style>
